<template>
	<view class="pagesBox">
		<view class="pagesBg"></view>
		<view class="pagesMain">
			<view class="payoutTitle">可兑换积分</view>
			<view class="payoutTotal">¥{{scoreInfo.score || '0.00'}}</view>
			<view class="pagesBody">
				<view class="titleBox">兑换积分<text v-if="scoreInfo.tx_ratio">(手续费：{{scoreInfo.tx_ratio*100}}%)</text></view>
				<view class="payoutMoneyBox">
					<view class="payoutIcon">积分</view>
					<view class="payoutInput">
						<u-input v-model="params.money" placeholder="请输入兑换积分" :clearable="false" :custom-style="inputStyle" type="digit" :border='false' :height="96"></u-input>
					</view>
					<view class="payoutAllBtn" @click="params.money = scoreInfo.score">全部兑换</view>
				</view>
				<view class="lineBox">
				    <view class="lineLeft">兑换账户</view>
				    <view class="lineRight" @click="toAddBank()">
						<text v-if="scoreInfo.bank_account">{{scoreInfo.bank_account || ''}}({{scoreInfo.bank_number || ''}})</text>
						<text v-if="!scoreInfo.bank_account" style="color: #73797F;">添加银行卡</text>
						<uni-icons type="right" size="16" color="#000"></uni-icons>
					</view>
				</view>
			</view>
			<my-submitBtn :isFixed="false" btnText="确认兑换" @click="submitBefore"></my-submitBtn>
			<!-- <view class="tipBox">
				<u-icon name="error-circle" color="#A1A5AA" size="32"></u-icon>
				<text style="margin-left: 8rpx;" @click="toDocument">兑换说明</text>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				baseUrl:this.$baseUrl,
				inputStyle:{borderRadius:'6rpx',paddingLeft:'24rpx',fontSize: '46rpx'},
				scoreInfo:{},
				moneyTotal:'0.00',
				params:{
					money:'',
					bank_no:'',
					bank_name:"",
					name:''
				},
				bankName:'',
				time:''
			};
		},
		onLoad(options) {
		},
		onShow() {
			this.getScoreInfo()
		},
		methods:{
			async getScoreInfo(){
				let res = await uni.$http('POST','score/index');
				console.log("积分信息",res);
				if(res.code == 1){
					this.scoreInfo = res.data;
					this.params.bank_no = res.data.bank_number;
					this.params.bank_name = res.data.bank_name;
					this.params.name = res.data.bank_account;
				}else if(res.msg.includes('登录')){
					uni.setStorageSync('token',0);
				}
			},
			submitBefore(){
				if(!this.scoreInfo.bank_account){
					uni.$u.toast('请先添加银行卡')
					setTimeout(()=>{
						this.toAddBank()
					},1000)
				}else if((this.params.money * 1) == 0){
					uni.$u.toast('请输入兑换积分')
				}else{
					if(this.time){
						clearTimeout(this.time)
						this.time = '';
					}
					uni.showLoading({
						title:"加载中",
						mask:true
					})
					this.time = setTimeout(()=>{
						this.submit()
					},700)
				}
			},
			async submit(){
				let res = await uni.$http('POST','score/withdrawal',this.params);
				uni.hideLoading()
				uni.$u.toast(res.msg)
				if(res.code == 1){
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				}
			},
			toAddBank(){
				uni.navigateTo({
					url:"/pagesMy/jifen/addBank"
				})
			},
			toBankList(){
				uni.navigateTo({
					url:"/pagesMy/storeManage/bankList?comePage=payouts"
				})
			},
			toDocument(){
				uni.navigateTo({
					url:"/pagesShare/document/document?id=3"
				})
			},
		}
	}
</script>

<style scoped lang="scss">
.pagesBox{
	.pagesBg {
		height: 300rpx;
		background-color: #2BA777;
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
	}
	.pagesMain{
		padding: 12rpx 24rpx;
		position: absolute;
		top: 0%;
		left: 0%;
		right: 0%;
		.payoutTitle{
			font-weight: 400;
			font-size: 24rpx;
			color: #fff;
			margin-top: 32rpx;
		}
		.payoutTotal{
			font-weight: 500;
			font-size: 56rpx;
			color: #FFFFFF;
			margin: 16rpx 0;
		}
		.pagesBody{
			background-color: #fff;
			border-radius: 16rpx;
			padding: 24rpx;
			margin-bottom: 24rpx;
			.titleBox{
				font-weight: 400;
				font-size: 28rpx;
				color: #73797F;
			}
			.payoutMoneyBox{
				border-bottom: 2rpx solid #E7E8E9;
				margin-top: 24rpx;
				display: flex;
				justify-content: space-between;
				align-items: center;
				.payoutIcon{
					font-weight: 500;
					font-size: 36rpx;
					color: #16202B;
				}
				.payoutInput{
					flex: 1;
				}
				.payoutAllBtn{
					font-weight: 400;
					font-size: 28rpx;
					color: #2BA777;
				}
			}
			.lineBox{
			    margin-top: 28rpx;
			    display: flex;
			    align-items: flex-start;
			    .lineLeft{
					font-weight: 400;
					font-size: 28rpx;
					color: #73797F;
			        margin-right: 10rpx;
			        display: flex;
			    }
			    .lineRight{
			        flex: 1;
					font-weight: 400;
					font-size: 28rpx;
					color: #16202B;
			        word-break: break-all;
					display: flex;
					justify-content: flex-end;
					align-items: center;
			    }
			}
		}
		.submitBox{
			height: 130rpx;
			padding: 0 16rpx;
			letter-spacing: 2rpx;
			margin-top: 32rpx;
			display: flex;
			justify-content: space-around;
			align-items: center;
			.btn{
				width: 100%;
				height: 96rpx;
				color: #FFFFFF;
				font-size: 30rpx;
				font-weight: 600;
				border-radius: 48rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}
			.btn1{
				background-color: #04449E;
			}
			.btnHover{
				background-color: #3C7AF7;
			}
		}
		.tipBox{
			font-weight: 400;
			font-size: 24rpx;
			color: #A1A5AA;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}
</style>
<style>
	page{
		background-color: #F7F8FA;
	}
</style>